<template>
    <div class="message">
        <!--顶部-->
        <div class="top">
            <div class="iconfont icon-zuo1 ret"></div>
            <div class="txt">消息中心</div>
        </div>
        <!---->
        <div class="body">
            <router-view/>
        </div>
        <!--底部-->
        <div class="footer">
            <div class="nav">
                <div class="nav_item">
                    <i class="iconfont icon-jiaofei"></i>
                    <li>缴费</li>
                </div>
                <div class="nav_item" @click="$router.push({name:'list'})">
                    <i class="iconfont icon-fangyuan"></i>
                    <li>房源</li>
                </div>
                <div class="nav_item" style="color: #ff9800" @click="$router.push({name:'message'})">
                    <i class="iconfont icon-xiaoxizhongxin" style="color: #ff9800"></i>
                    <li>消息中心</li>
                </div>
                <div class="nav_item" style="margin-right: 0;">
                    <i class="iconfont icon-wodedangxuan"></i>
                    <li>我的</li>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'message',
};
</script>

<style lang="scss">
    @import '@/css/public.scss';
    .message{
        display: flex;
        flex-direction:column;
        height: 100%;
        .top{
            width: 100%;
            height: vw(50);
            background: $public-color;
            position: relative;
            .ret{
                float: left;
                height: vw(50);
                line-height: vw(50);
                font-size: vw(20);
                margin-left: vw(20);
                color: white;
            }
            .txt{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                height: vw(50);
                line-height: vw(50);
                font-size: vw(16);
                color: white;
            }

        }
        .body{
            height:0;
            flex-grow:1;
            z-index:1;
            overflow:scroll;
            margin-top: vw(15);
            padding: vw(10) vw(15);

            .m_card{
                width: 100%;
                height: vw(60);
                border-bottom: 1px solid #ededed;
                background-color: #ececec;


            }
        }
        .footer{
            height: 54px;
            padding: vw(12) vw(43) 0 vw(43);
            .nav{
                .nav_item{
                    float: left;
                    width: vw(50);
                    margin-right: vw(28);
                    text-align: center;
                    i{
                        font-size: vw(21);
                        line-height: vw(21);
                        color:#8e8e8e;
                        text-align: center;
                    }
                    li{
                        margin-top: vw(5);
                        text-align: center;
                        font-size: vw(8);
                        line-height: vw(8);
                    }
                }
            }
        }

    }
</style>
